<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆使用中心</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<h1>车辆使用</h1>
<div id="app">
    <el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="carid" label="ID" v-if="show"></el-table-column>
            <el-table-column prop="cartype" label="车辆"></el-table-column>
            <el-table-column prop="carplate" label="车牌"></el-table-column>
            <el-table-column prop="number" label="可载人数"></el-table-column>
            <el-table-column prop="oilmass" label="油量"></el-table-column>
            <el-table-column prop="damagelevel" label="损坏程度">
                <template slot-scope="scope">
　　　　　　　　　　<span v-if="scope.row.damagelevel==0">未损坏</span>
　　　　　　　　　　<span v-if="scope.row.damagelevel==1">轻度损坏</span>
　　　　　　　　　　<span v-if="scope.row.damagelevel==2">中度损坏</span>
　　　　　　　　　　<span v-if="scope.row.damagelevel==3">严重损坏</span>
　　　　　　　　</template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
　　　　　　　　　　<span v-if="scope.row.state==1">空闲</span>
　　　　　　　　　　<span v-if="scope.row.state==2">使用中</span>
　　　　　　　　　　<span v-if="scope.row.state==3">损坏</span>
　　　　　　　　</template>
            </el-table-column>
            <el-table-column prop="username" label="使用者">
                <template slot-scope="scope">
                    <span v-if="scope.row.username==null">无</span>
                    <span v-else>{{scope.row.username}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope" v-if="scope.row.username==null">
                    <el-button type="primary" size="mini"
                            @click="toEdit(scope.row)">
                        申请
                    </el-button>
                </template>
                <template v-else></template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row>
    <!--模态框-->
    <el-row>
        <el-dialog title="申请填写" :visible.sync="editFormVisible">
            <el-form :model="form">
                <el-form-item label="车辆ID" :label-width="formLabelWidth">
                    <el-input v-model="form.carid" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="车辆" :label-width="formLabelWidth">
                    <el-input v-model="form.cartype" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="车牌" :label-width="formLabelWidth">
                    <el-input v-model="form.carplate" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="油量" :label-width="formLabelWidth">
                    <el-input v-model="form.oilmass" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="损坏程度" :label-width="formLabelWidth">
                    <span v-if="form.damagelevel==0">未损坏</span>
                    <span v-if="form.damagelevel==1">轻度损坏</span>
                    <span v-if="form.damagelevel==2">中度损坏</span>
                    <span v-if="form.damagelevel==3">严重损坏</span>
                </el-form-item>
                <el-form-item label="申请理由" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.usereason">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定 申 请</el-button>
            </div>
        </el-dialog>
    </el-row>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            tableData:[],
            username:'',
            form:{},
            currentPage:1,
            pageSize:5,
            total:20,
            editFormVisible:false,//模态框
            formLabelWidth:"120px"
        },
        created:function(){
            this.loadData();
        },
        methods:{
            loadData:function () {
                //初始化数据
                axios.get('/car/carPage',{
                    params: {
                        pageNo:this.currentPage,
                        pageSize:this.pageSize
                    }
                }).then(function (response) {
                    //赋值分页列表
                    app.tableData = response.data.list;
                    //删除最后一页为空时，调到上一页
                    if(app.tableData.length==0&&app.currentPage!=1){
                        app.currentPage=app.currentPage-1;
                        this.loadData();
                    }
                    //赋值总条数
                    app.total = response.data.total;
                })
            },
            //每页数量发生变化时
            handleSizeChange:function (v) {
                app.pageSize=v;
                this.loadData();
            },
            //当前页数放生变化是
            handleCurrentChange:function (v) {
                app.currentPage=v;
                this.loadData();
            },
            //打开模态框
            toEdit:function (row) {
                app.form={};//清空
                app.form=row;
                app.editFormVisible=true;
            },
            add:function () {//提交申请
                axios.post('/car/addCarAudit',app.form).then(function (response) {
                    if(response.data == 1){
                        //提示成功
                        app.$message({
                            message: '恭喜你，提交申请成功',
                            type: 'success'
                        });
                        //关闭弹出框
                        app.editFormVisible=false;
                        //重新加载数据
                        this.loadData();
                    }
                })
            }
        }
    });
</script>
</body>
</html>